import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  WebView
} from 'react-native';

import NavTitle from '../component/NavTitle';

const {width: windowW, height: windowH} = Dimensions.get('window');

import BusyIndicator from 'react-native-busy-indicator';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';

class ServicesDetail extends Component {
  constructor(props) {
    super(props);

    this.state = {

    };

  }

  render() {
    const {navigator, url, title} = this.props;
    return(
      <View style={styles.container}>
        <NavTitle
          headColor = '#18bdce'
          leftButton={true}
          leftText='返回'
          leftImg={require('../imgs/backBtn.png')}
          title={title}
          leftHander={() => navigator.pop()}
        />
        <WebView
          style={{width:windowW,flex:1}}
          source ={{uri:url}}
          automaticallyAdjustContentInsets={true}
          startInLoadingState={false}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          decelerationRate="normal"
          scalesPageToFit={true}
          onLoadStart={() => {
            loaderHandler.showLoader("加载中...");
          }}
          onLoadEnd={() => {
            loaderHandler.hideLoader();
          }}
          />
          <BusyIndicator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f2f2f2',
    flexDirection: 'column'
  },
});

module.exports = ServicesDetail;
